$(function() {
    // 需求1: 渲染用户数据到页面上,
    // 需求2: 根据数据总条数,利用bootstrap-pagintor插件渲染分页控件到页面上
    // 当前页
    var currentPage = 1;
    // 一页多少条
    var pageSize = 5;
  
    // 1. 一进入页面, 进行渲染
    render();
    //封装函数渲染用户信息和分页控件
    function render() {
      // 发送请求, 获取表格渲染的数据
      $.ajax({
        type: "get",
        url: "/user/queryUser",
        data: {
          page: currentPage,
          pageSize: pageSize
        },
        success: function( info ) {
          console.log( info );
          // 参数2 必须是一个对象
          // 在模板中可以任意使用对象中的属性
          // isDelete 表示用户的启用状态, 1就是启用, 0就是禁用
          var htmlStr = template( "tmp-user", info );
          $('tbody').html( htmlStr );
  
  
          // 配置分页
          $('#pagintor').bootstrapPaginator({
            // 指定bootstrap版本
            bootstrapMajorVersion: 3,
            // 当前页
            currentPage: info.page,
            // 总页数
            totalPages: Math.ceil( info.total / info.size ),
  
            // 当页面被点击时触发
            onPageClicked: function( a, b, c, page ) {
              // page 当前点击的页码
              console.log(page);
              
              currentPage = page;
              // 调用 render 重新渲染页面
              render();
            }
          });
  
        }
      });
    }
    
    //需求3: 点击启用禁用按钮,弹出模态框,并记录当前的数据;
    //思路: 注册事件委托给tobody,由指定的子元素触发
    //声明全局变量,currentId用于存储被点击的id, isDelete来记录启用与禁用的状态
    var currentId;
    var isDelete;
    $('tbody').on('click', 'button', function () {
        //调用bootstrap中modal方法
        $('.modal').modal('show');
        //获取当前被点击的id
        // console.log(this.parentNode.parentNode.dataset.id);
        currentId = $(this).parent().parent()[0].dataset['id'];
        // 启用与禁用依据,当前按钮的颜色(是否有这个类名)绿色代表1,红色代表0
        isDelete = $(this).hasClass('btn-success') ? 1 : 0;
        // console.log(isDelete);
        // console.log(currentId);
   
    });
    

    // 需求4: 实现启动和禁用功能

    $('#btn-toggle').on('click', function () {
        //获取当前的id(自定义属性值)
        $.ajax({
            url: '/user/updateUser',
            type: 'post',
            data: {
                id: currentId,
                isDelete: isDelete
            },
            dataType: 'json',
            success: function (info) {
                // console.log(info);
                if(info.success) {//成功,重新渲染当前页面,并且关闭模态框
                  // console.log('chenggg');
                  render();
                  $('.modal').modal('hide');

                  
                } else {//失败,隐藏模态框
                  $('.modal').modal('hide')

                }
               
                
            }
        })
        
    })
  
    
  
  
  
  
  })